<template>
    <el-dialog id="company-user-interview"
               append-to-body
               top="5vh"
               :width="dialog.width"
               :visible="dialog.visible"
               :modal-append-to-body="false"
               :close-on-click-modal="false"
               @close="close">
        <div slot="title" class="text-center">
            <span class="font-s20 text-bold">
                <icon name="interview"></icon>
                查看用户 {{ companyUserInterview.user.uid }} ● {{ companyUserInterview.user.company_name }} 发送的面试通知记录
            </span>
        </div>
        <div class="r-flex mb-20">
            <div style="width: 160px;">
                <!-- 岗位 -->
                <el-select v-model="params.job_id"
                           placeholder="职位"
                           size="medium"
                           clearable
                           @change="handleQuery">
                    <el-option v-for="item in companyUserInterview.jobs"
                               :key="item.id"
                               :label="item.job_title"
                               :value="item.id">
                        <div class="r-flex">
                            <div class="r-flex__item">
                                <el-tag size="mini" :type="item.status.style">{{ item.job_title }}</el-tag>
                            </div>
                            <div class="ml-10 text-info font-s12">{{ item.id }}</div>
                        </div>
                    </el-option>
                </el-select>
            </div>
            <div class="ml-10" style="width: 120px;">
                <!-- 类型 -->
                <el-select v-model="params.job_status"
                           placeholder="招聘状态"
                           size="medium"
                           clearable
                           @change="handleQuery">
                    <el-option label="招聘中" :value="1"></el-option>
                    <el-option label="已停招" :value="0"></el-option>
                </el-select>
            </div>
            <div class="ml-10" style="width: 120px;">
                <!-- 类型 -->
                <el-select v-model="params.read_status"
                           placeholder="处理状态"
                           size="medium"
                           clearable
                           @change="handleQuery">
                    <el-option label="未读" :value="0"></el-option>
                    <el-option label="已读" :value="1"></el-option>
                    <el-option label="邀约面试" :value="2"></el-option>
                    <el-option label="婉拒" :value="3"></el-option>
                    <el-option label="删除" :value="4"></el-option>
                </el-select>
            </div>
            <el-button size="medium" class="ml-10" @click="handleReload">
                <icon name="refresh"></icon>
                重新载入
            </el-button>
            <div class="r-flex__item"></div>
            <strong class="font-s16 text-bold">查询结果：{{ companyUserInterview.total || 0 }}</strong>
        </div>

        <el-table size="medium"
                  stripe
                  v-loading="table.loading"
                  :data="companyUserInterview.data_list">
            <template slot="empty">
                <el-empty></el-empty>
            </template>
            <el-table-column type="expand" width="20">
                <template slot-scope="item">
                    <strong>备注：</strong> {{ item.row.remark || '空' }}
                </template>
            </el-table-column>
            <el-table-column label="简历" width="90">
                <template slot="header">
                    简历
                    <el-popover placement="top" trigger="hover" content="红点：表示默认简历">
                        <icon slot="reference" name="ask-fill" class="text-info-light"></icon>
                    </el-popover>
                </template>
                <template slot-scope="item">
                    <el-link v-if="item.row.resume"
                             target="_blank"
                             type="primary"
                             :underline="false"
                             :href="item.row.resume.link_url">{{ item.row.resume.name }}</el-link>
                    <el-link v-else
                             target="_blank"
                             type="info"
                             :underline="false">已删除</el-link>
                </template>
            </el-table-column>
            <el-table-column label="状态" width="190" align="center">
                <template slot="header">
                    简历状态
                    <el-popover placement="right" trigger="hover">
                        <div>
                            <div><el-tag size="mini"><icon name="audit"></icon></el-tag> 审核状态</div>
                            <div class="mt-5"><el-tag size="mini"><icon name="work-status"></icon></el-tag> 求职状态</div>
                            <div class="mt-5"><el-tag size="mini"><icon name="privacy"></icon></el-tag> 隐私状态</div>
                        </div>
                        <icon slot="reference" name="ask-fill" class="text-info-light"></icon>
                    </el-popover>
                </template>
                <template slot-scope="item">
                    <div v-if="item.row.resume">
                        <el-tag size="mini"
                                :type="item.row.resume.audit_status.style">
                            <icon name="audit"></icon>
                            {{ item.row.resume.audit_status.label_simple }}
                        </el-tag>
                        <el-tooltip effect="dark"
                                    placement="top"
                                    :content="item.row.resume.work_status.label">
                            <el-tag size="mini"
                                    class="ml-5"
                                    :type="item.row.resume.work_status.style"
                                    :disable-transitions="true">
                                <icon name="work-status"></icon>
                                {{ item.row.resume.work_status.label_simple }}
                            </el-tag>
                        </el-tooltip>
                        <el-tag size="mini"
                                class="ml-5"
                                :type="item.row.resume.privacy_status.style"
                                :disable-transitions="true">
                            <icon name="privacy"></icon>
                            {{ item.row.resume.privacy_status.label_simple }}
                        </el-tag>
                    </div>
                    <el-tag v-else
                            size="mini"
                            effect="dark"
                            type="black">已删除</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="岗位" :show-overflow-tooltip="true">
                <template slot-scope="item">
                    <el-link v-if="item.row.company_job"
                             target="_blank"
                             type="primary"
                             :underline="false"
                             :href="item.row.company_job.link_url">
                        <div class="text-hide text-primary">{{ item.row.company_job.job_title }}</div>
                    </el-link>
                    <el-tag v-else
                            size="mini"
                            effect="dark"
                            type="black">已删除</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="状态" width="60" align="center">
                <template slot-scope="item">
                    <el-tag v-if="item.row.company_job"
                            size="mini"
                            effect="dark"
                            :type="item.row.company_job.status.style">{{ item.row.company_job.status.label }}
                    </el-tag>
                    <el-tag v-else
                            size="mini"
                            effect="dark"
                            type="black">删除</el-tag>
                </template>
            </el-table-column>
<!--            <el-table-column label="公司名称" width="180" :show-overflow-tooltip="true">-->
<!--                <template slot-scope="item">-->
<!--                    <el-link target="_blank"-->
<!--                             type="text-hide"-->
<!--                             :underline="false"-->
<!--                             :href="item.row.company_basic.link_url">-->
<!--                        <div class="text-hide text-primary">{{ item.row.company_basic.company_name }}</div>-->
<!--                    </el-link>-->
<!--                </template>-->
<!--            </el-table-column>-->
            <el-table-column prop="update_time" label="处理" width="60" align="center">
                <template slot-scope="item">
                    <el-tag size="mini"
                            :effect="item.row.read_status.value === 0 ? 'light' : 'dark'"
                            :type="item.row.read_status.style">{{ item.row.read_status.label }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="created_at" label="收到时间" width="160"></el-table-column>
            <el-table-column prop="updated_at" label="更新时间" width="160"></el-table-column>
            <el-table-column label="操作" width="120">
                <template slot="header">
                    操作
                    <el-popover placement="right" trigger="hover">
                        <div>
                            <div><el-tag size="mini"><icon name="delete"></icon></el-tag> 删除</div>
                            <div class="mt-5"><el-tag size="mini"><icon name="resume"></icon></el-tag> 查看简历</div>
                            <div class="mt-5"><el-tag size="mini"><icon name="post"></icon></el-tag> 查看招聘职位</div>
                        </div>
                        <icon slot="reference" name="ask-fill" class="text-info-light"></icon>
                    </el-popover>
                </template>
                <template slot-scope="item">
                    <el-button-group class="r-button-group">
                        <el-button size="medium" @click="handleDestroy(item.row.id)">
                            <icon name="delete"></icon>
                        </el-button>
                        <el-button size="medium"
                                   :disabled="!item.row.resume"
                                   @click="dialogResumeShow(item.row.resume_id)">
                            <icon name="resume"></icon>
                        </el-button>
                        <el-button size="medium"
                                   :disabled="!item.row.company_job"
                                   @click="dialogCompanyJobShow(item.row.job_id)">
                            <icon name="post"></icon>
                        </el-button>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>

        <!-- 页码 -->
        <div class="block-pagination mt-20 text-center">
            <el-pagination :total="companyUserInterview.total"
                           :page-sizes="pagination.pageSizes"
                           :page-size="20"
                           :current-page.sync="pagination.currentPage"
                           @current-change="handlePageQuery"
                           background
                           layout="prev, pager, next, jumper"></el-pagination>
        </div>

        <!-- dialog -->
        <component :is="dialogBox.component" :dialog="dialogBox" @close="closeDialogBox"></component>
    </el-dialog>
</template>

<script lang="ts">
import Component, { mixins } from 'vue-class-component'
import { Emit, Prop } from 'vue-property-decorator'

import { namespace } from 'vuex-class'

import BaseMixin from '@/mixins/base'
import FunctionMixin from '@/mixins/function'
import PersonalMixin from '@/mixins/personal'
import CompanyMixin from '@/mixins/company'
import { errorMessage, successMessage, loading } from '@/utils'

const module = namespace('cms/interview')

import ResumeShow from '@/views/cms/personal/resume/Show.vue'
import CompanyJobShow from '@/views/cms/company/company-job/Show.vue'

@Component({
  components: {
    ResumeShow,
    CompanyJobShow
  }
})
export default class CompanyUserInterview extends mixins(
  BaseMixin,
  FunctionMixin,
  PersonalMixin,
  CompanyMixin) {
  @Prop({type: Object, default: {width: '1000px', visible: false, index: -1}}) dialog!: any

  // Vuex
  @module.State companyUserInterview!: any
  @module.Action getCompanyUserInterview!: (payload: any) => Promise<any>
  @module.Action destroy!: (payload: any) => Promise<any>

  /**
   * 重新载入
   *
   * @return {void}
   */
  private handleReload(): void {
    const _loading = loading({target: '#company-user-interview > .el-dialog', background: 'rgba(0, 0, 0, .7)'})
    this.getCompanyUserInterview({uid: this.companyUserInterview.user.uid}).then((res) => {
      _loading.close()
      res.status === 200 ? successMessage('重新载入成功') : errorMessage(res.message)
    }).catch((err) => {
      _loading.close()
    })
  }

  /**
   * 获取查询
   *
   * @param {Object} params
   * @return Promise<any>
   */
  private getQuery(params: any = {}): Promise<any> {
    this.table.loading = true
    return this.getCompanyUserInterview({uid: this.companyUserInterview.user.uid, params})
      .then((res) => {
        this.table.loading = false
      }).catch((err) => {
        this.table.loading = false
      })
  }

  /**
   * 处理查询
   *
   * @return {void}
   */
  private handleQuery(): void {
    this.table.loading = true
    const params = {
      ...this.params,
      per_page: this.pagination.perPage,
      page: 1
    }

    this.getQuery(params)
  }

  /**
   * 处理分页
   *
   * @return {void}
   */
  private handlePageQuery(): void {
    this.table.loading = true
    const params = {
      ...this.params,
      per_page: this.pagination.perPage,
      page: this.pagination.currentPage
    }

    this.getQuery(params)
  }

  /**
   * 处理删除
   *
   * @param id
   * @return {void}
   */
  private handleDestroy(id: number): void {
    this.$confirm('确定删除该条数据吗？', '操作提示', {
      type: 'warning'
    }).then(() => {
      this.destroy({id}).then((res) => {
        res.status === 200 ? successMessage(res.message) : errorMessage(res.message)
      })
    })
  }

  @Emit()
  close(): void {}
}
</script>

<style scoped>
</style>